<template>
  <div class="main-div">
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="search.userName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getStaffList">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="add-div">
      <el-button type="primary" plain :icon="Edit" @click="show">新增</el-button>
    </div>

    <el-table :data="menuList" style="width: 80%">
      <el-table-column prop="menuName" label="菜单名称" width="180" />
      <el-table-column prop="menuUrl" label="菜单URL" width="220" />
      <el-table-column prop="menuOrder" label="菜单顺序" width="80" />
      <el-table-column prop="permissionFlag" label="权限标识" width="200" />
      <el-table-column prop="parentName" label="父级菜单" width="120" />
      <el-table-column prop="optType" label="功能" width="180" :formatter="optFormatter" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="edit(row)">修改</el-button>
          <el-button link type="primary" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="showPagination">
      <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" />
    </div>

    <el-dialog width="30%" :modal="menuInfo" v-model="dialogVisible">
      <el-form ref="formTemp" label-width="100px">
        <el-form-item label="菜单名称">
          <el-input v-model="menuInfo.menuName" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="菜单URL">
          <el-input v-model="menuInfo.menuUrl" placeholder="请输入菜单URL" />
        </el-form-item>
        <el-form-item label="菜单顺序">
          <el-input v-model="menuInfo.menuOrder" placeholder="最小是0" />
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="menuInfo.permissionFlag" placeholder="请使用英文或拼音，比如：staff.management" />
        </el-form-item>
        <el-form-item label="选择父级菜单">
          <el-select v-model="menuInfo.parentId" placeholder="请选择父级菜单" @change="handleMainMenuChange"
            style="width: 180px">
            <el-option v-for="item in options" :key="item.id" :label="item.menuName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="请选择菜单图标">
          <el-select v-model="menuInfo.icon" placeholder="请选择菜单图标" style="width: 180px">
            <el-option v-for="icon in iconNames" :key="icon" :label="icon" :value="icon">
              <el-icon>
                <component :is="icon" />
              </el-icon>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="择操作功能" v-if="isMainMenu != 0">
          <el-checkbox-group v-model="checkedOpts" @change="handleCheckedOptsChange">
            <el-checkbox v-for="opt in opts" :key="opt.name" :label="opt.name" :value="opt.name">
              {{ opt.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- <el-form-item label="菜单图标">
            <el-input v-model="menuInfo.icon"  placeholder="待实现" style="width: 180px;"/>
          </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="primary" @click="hide">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script setup>
import { GetMenuList, MenuAdd } from '@/api/admin.js'
import { MenuFirstList } from '@/api/admin.js'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import * as ElIcons from '@element-plus/icons-vue'

const router = useRouter();

var dialogVisible = ref(false);

var dialogAddVisible = ref(false);

var search = ref([]);

var menuList = ref([]);

var showPagination = ref(false);

const checkAll = ref(false)

const isIndeterminate = ref(true)

// 过滤掉非图标组件的属性，只保留图标组件
const iconComponents = Object.keys(ElIcons);

// 提取图标名称，去掉前缀后的部分
const iconNames = iconComponents.map(name => name.replace('ElIcon', ''));


// false表示新增，true表示修改
var editOrAdd = ref(false);

const checkedOpts = ref(['查询'])

const opts = [
  { name: '查询', value: 1 },
  { name: '新增', value: 2 },
  { name: '修改', value: 3 },
  { name: '删除', value: 4 },
  { name: '授权', value: 5 },
  { name: '导出', value: 6 }
]

var isMainMenu = ref(0);

function optFormatter(row, column, cellValue) {
  // console.info(cellValue)
  if (cellValue === 1) {
    return '查询';
  } else if (cellValue === 2) {
    return '新增';
  } else if (cellValue === 3) {
    return '修改';
  } else if (cellValue === 4) {
    return '删除';
  } else if (cellValue === 5) {
    return '授权';
  } else if (cellValue === 6) {
    return '导出';
  } else {
    return '';
  }
}

const handleMainMenuChange = (value) => {
  isMainMenu.value = value
}

const handleCheckedOptsChange = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === opts.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < opts.length
}

getMenuList();

function getMenuList(data = {}) {

  GetMenuList(data)
    .then(res => {
      menuList.value = res.data.data.data;
      if (res.data.data.totalCount > 0) {
        showPagination = true
      }
    })
}

const options = ref([])


function getFirstMenuList() {

  MenuFirstList()
    .then(res => {
      console.info(res.data.data);
      options.value = res.data.data;
    })
}

var menuInfo = ref({
  menuName: '',
  menuUrl: '',
  menuOrder: '',
  parentId: '',
  permissionFlag: '',
  icon: '',
  optList: []
})

const onSubmit = () => {
  console.info("isIndeterminate");
  const selectedValues = opts
    .filter(opt => checkedOpts.value.includes(opt.name))
    .map(opt => opt.value);

  console.log(selectedValues);
  menuInfo.value.optList = selectedValues;
  MenuAdd(menuInfo.value)
    .then(res => {
      if (res.data.code == 200000) {
        // router.push({ path: '/permission/staffManagement' });
        hide();
        getMenuList();
      } else {
        //错误提示框
        ElMessage({
          message: res.data.msg,
          type: 'warning'
        });
      }
    })
}
/**
* dialog 操作，在dialog上有个v-model="dialogVisible"
* 当地dialogVisible=true时，表示dialog打开，false表示关闭
*/
function show() {
  resetMenu();
  dialogVisible.value = true;
  getFirstMenuList();
}

function edit(data) {
  getFirstMenuList();
  editOrAdd.value = true;
  menuInfo.value = { ...data };
  console.info(data);
  dialogVisible.value = true;
}

function hide() {
  dialogVisible.value = false;
}

function resetMenu() {
  Object.keys(menuInfo.value).forEach(key => {
    menuInfo.value[key] = '';
  });
}

function addOpt(data) {
  staffInfo.value = { ...data };
  staffInfo.gender = data.gender;
  dialogAddVisible.value = true;
}


</script>
<style>
body {
  background-color: aliceblue;
}

.main-div {
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: white;
}

.el-form {
  margin-top: 8px;
  padding-left: 18px;
  background-color: white;
}

.add-div {
  padding-left: 18px;
}

.el-table {
  margin-top: 5px;
  padding-left: 10px;
  /* border-radius: 5% 5% 5% 5%;  */
  /* transform: skew(10deg); */
}

.el-table__column-resize-proxy {
  display: block;
}
</style>